<template>

    <view :style="{'height':windowHeight, 'width':windowWidth,'background-color':'#F1F1F1'}">

        <view>
            <uni-row>
                <uni-col :span="20">
                    <view><uni-search-bar :radius="100" v-model="searchWord" @input="fetchAllStationInfos" @confirm="search" placeholder="台站名称"></uni-search-bar></view>
                </uni-col>
                <uni-col :span="3"><view></view></uni-col>
                <uni-col :span="1">
                    <view style="margin-top: 0.5rem; margin-left: 0.5rem; ">
                        <uni-icons type="plusempty" size="30" @click="navigateToStationUpdate()"  ></uni-icons>
                    </view>
                </uni-col>
            </uni-row>
            <view>
                <scroll-view>
                    <uni-list>
                        <uni-list-item v-for="station in stations"
                                       :key="station.stationCode"
                                       v-bind:title="station.stationCode + ' ' + station.stationName"
                                       v-bind:note="station.stationLevel + ' ' + station.location"
                                       clickable="true"
                                       @click="navigateToStationMenu(station.stationCode)"
                                       v-bind:stationCode="station.stationCode"
                        ></uni-list-item>
                    </uni-list>
                </scroll-view>
            </view>
        </view>

    </view>
    
</template>

<script>
    export default {
        name: "StationMain",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                searchWord: '',
                stations: [
                    {
                        stationCode: 'G1121',
                        stationName: '笋岗',
                        stationLevel: '三级站',
                        stationType: 'WSP3103',
                        location: '深圳市罗湖区笋岗街道办洪湖社区笋岗东路1088号洪湖污水厂楼顶'
                    }
                ]

            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight

            this.fetchAllStationInfos()
        },

        methods: {
            // 载入台站列表
            fetchAllStationInfos() {
                uni.showLoading({
                    title: "台站列表"
                })
                this.searchWord = this.searchWord === undefined ? '' : this.searchWord
                var that = this
                this.uniRequest({
                    url: '/stations',
                    data: {
                        searchWord: that.searchWord
                    },
                    methods: 'GET',
                }).then(function(response) {
                    that.stations = response.data.map((item) => {
                        item.stationLevel = that.globalData.STATION_LEVEL[item.stationLevel];
                        return item
                    });
                    uni.hideLoading();
                }).catch(err => {
                    uni.hideLoading();
                    uni.showToast({
                        icon: 'error',
                        title: '台站信息列表获取失败！ ',
                        duration: 2000
                    })
                    return;
                })
            },

            // 跳转至台站菜单页面
            navigateToStationMenu(stationCode) {
                var that = this
                uni.navigateTo({
                    url: '/pages/station/StationMenu?windowHeight=' + that.windowHeight + '&windowWidth=' + that.windowWidth + '&stationCode=' + stationCode
                })
            },

            // 跳转至台站详情页面
            navigateToStation(stationCode) {
                uni.navigateTo({
                    url: '/pages/station/StationInfo?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&stationCode=' + stationCode
                })
            },

            // 跳转至台站填报
            navigateToStationUpdate() {
                uni.navigateTo({
                    url: '/pages/station/StationInfoUpdate?windowHeight=' + this.windowHeight + '&windowWidth=' + this.windowWidth + '&action=create'
                })
            }
        }
    }
</script>

<style scoped>

</style>